<nb-auth-block>
    <h2 class="title">重置密码</h2>
    <small class="form-text sub-title">请你输入一个新的密码</small>
    <form (ngSubmit)="resetPass()" #resetPassForm="ngForm">

      <div *ngIf="errors && errors.length > 0 && !submitted" class="alert alert-danger" role="alert">
        <div><strong>Oh snap!</strong></div>
        <div *ngFor="let error of errors">{{ error }}</div>
      </div>
      <div *ngIf="messages && messages.length > 0 && !submitted" class="alert alert-success" role="alert">
        <div><strong>Hooray!</strong></div>
        <div *ngFor="let message of messages">{{ message }}</div>
      </div>

      <div class="form-group">
        <label for="input-password" class="sr-only">新密码</label>
        <input name="password" [(ngModel)]="user.password" type="password" id="input-password"
               class="form-control form-control-lg first" placeholder="新密码" #password="ngModel"
               [class.form-control-danger]="password.invalid && password.touched"
               [required]="true"
               [minlength]="6"
               [maxlength]="18"
               autofocus>
        <small class="form-text error" *ngIf="password.invalid && password.touched && password.errors?.required">
          密码必填！
        </small>
        <small
          class="form-text error"
          *ngIf="password.invalid && password.touched && (password.errors?.minlength || password.errors?.maxlength)">
          密码为6到18个字符
        </small>
      </div>

      <div class="form-group">
        <label for="input-re-password" class="sr-only">确认密码</label>
        <input
          name="rePass" [(ngModel)]="user.confirmPassword" type="password" id="input-re-password"
          class="form-control form-control-lg last" placeholder="确认密码" #rePass="ngModel"
          [class.form-control-danger]="(rePass.invalid || password.value != rePass.value) && rePass.touched"
          [required]="true">
        <small class="form-text error"
               *ngIf="rePass.invalid && rePass.touched && rePass.errors?.required">
          再次输入密码
        </small>
        <small
          class="form-text error"
          *ngIf="rePass.touched && password.value != rePass.value && !rePass.errors?.required">
          密码与确认密码不匹配
        </small>
      </div>

      <button [disabled]="submitted || !resetPassForm.form.valid" class="btn btn-hero-success btn-block"
              [class.btn-pulse]="submitted">
        确认密码
      </button>
    </form>

    <div class="links col-sm-12">
      <small class="form-text">
        已经有账号了？ <a routerLink="../login"><strong>登陆</strong></a>
      </small>
      <small class="form-text">
        <a routerLink="../register"><strong>注册</strong></a>
      </small>
    </div>
  </nb-auth-block>